<template>
  <div class="hotel">
    <div class="header">
      <div class="time-location">
        <span class="shi">{{currentTimes}}</span>
      </div>
      <div class="title">酒店设备</div>
      <!-- 更多选项按钮 -->
    </div>
    <h2>{{ biao.hotelName }}</h2>
    <p>{{ biao.address }}</p>
    <p>酒店电话：{{ biao.contactInfo }}</p>
    <p class="hotel-type">{{ hotel.type }}</p>
    <p class="hotel-desc">{{ hotel.description }}</p>

      <h2>网友评价({{ totalCount }}万)</h2>
    <div class="evaluation-container">
      <div class="rating-item">
        <span class="rating-score1"> 5.0</span>
        <span class="rating-score"> 超棒</span>
        <span class="rating-percentage">高于98%同类酒店</span>
      </div>
      <ul class="detail-list">
        <li v-for="(item, index) in detailRatings" :key="index">
          <span class="detail-item-title">{{ item.title }}</span>
          <span class="detail-item-score">{{ item.score }}</span>
        </li>
      </ul>
    </div>

    <h3>卖点</h3>
    <p>{{ hotel.sellingPoints }}</p>
    <h3>订房必读 - 入住限制</h3>
    <p>{{ hotel.checkInRestrictions }}</p>
    <div class="policy-section">
      <h3>政策</h3>
      <div class="policy-item" v-for="(policy, index) in policies" :key="index">
        <div class="policy-title">
          <i class="icon-policy"></i>
          {{ policy.title }}
        </div>
        <div class="policy-content">
          {{ policy.content }}
        </div>
      </div>
    </div>
    <!-- 设施服务部分 -->
    <div class="service-section">
      <h3>设施服务</h3>
      <div class="service-item" v-for="(service, index) in services" :key="index">
        <div class="service-title">
          <i class="icon-service"></i>
          {{ service.title }}
        </div>
        <div class="service-content">
          <div v-for="(subService, subIndex) in service.subServices" :key="subIndex">
            {{ subService }}
          </div>
        </div>
      </div>
    </div>
    <div class="jiao">
    <h3>交通</h3>
    <div class="transportation-item" v-for="(item, index) in transportationList" :key="index">
      <div class="transportation-icon">
        <i :class="item.icon"></i>
      </div>
      <div class="transportation-details">
        <p class="transportation-name">{{ item.name }}</p>
        <p class="transportation-distance-time">{{ item.distanceTime }}</p>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
       totalCount : 1.5,
       overallRating : 5.0,
       detailRatings : [
        { title: '位置', score: '4.9' },
        { title: '设施', score: '5.0' },
        { title: '服务', score: '4.9' },
        { title: '卫生', score: '5.0' },
      ],
      currentTimes: new Date().toLocaleTimeString(),
      biao:[],
      transportationList: [
        {
          name: '北京首都机场',
          icon: 'icon - airplane',
          distanceTime: '距酒店驾车28.6公里，约40分钟'
        },
        {
          name: '永安里地铁站C口',
          icon: 'icon - subway',
          distanceTime: '步行700米，约8分钟'
        },
        {
          name: '北京东站',
          icon: 'icon - train',
          distanceTime: '步行1.1公里，约15分钟'
        },
        {
          name: '北京火车站',
          icon: 'icon - train',
          distanceTime: '距酒店3.4公里，约10分钟'
        },
        {
          name: '北京西站',
          icon: 'icon - train',
          distanceTime: '距酒店3.5公里，约12分钟'
        }
      ],
      policies: [
        {
          title: '入离时间',
          content: '入住时间：14:00以后，离店时间：12:00以前'
        },
        {
          title: '儿童及加床',
          content: '酒店允许携带儿童入住，18岁及以上客户按成人收费'
        },
        {
          title: '宠物',
          content: '不可携带宠物'
        },
        {
          title: '早餐',
          content: '酒店不提供早餐'
        },
        {
          title: '年龄限制',
          content: '仅限10 - 70岁的客人办理入住'
        }
      ],
      services: [
        {
          title: '停车场',
          subServices: ['免费停车场', '无充电车位']
        },
        {
          title: '网络',
          subServices: ['免费公共区域WiFi']
        },
        {
          title: '前台',
          subServices: ['行李免费寄存', '叫醒服务', '快速办理入住', '大堂经理', '24小时前台', '前台消毒洗手液']
        },
        {
          title: '通用设备',
          subServices: ['电梯', '公共区域监控', '中文指示', '暖气', '空调', '单体空调']
        },
        {
          title: '其他服务',
          subServices: ['无接触送物', '提供口罩']
        }
      ],
      hotel: {
        name: '速9精选酒店 (**门店)',
        phone: '010 - 888****',
        type: '舒适型',
        description: '舒适型酒店，酒店设施齐备，可提供良好的服务。智能语音，酒店多种房型，小度语音通话，送外卖快',
        reviewCount: '1.5万',
        ratings: [
          { name: '5.0 超棒', value: '高于99%同类酒店' },
          { name: '位置', value: '4.9' },
          { name: '设施', value: '5.0' },
          { name: '服务', value: '4.9' },
          { name: '卫生', value: '5.0' }
        ],
        subRatings: [
          { name: '前台给力', value: '100%' },
          { name: '周边遍历', value: '100%' },
          { name: '干净卫生', value: '98%' },
          { name: '房间好', value: '98%' },
          { name: '设备不错', value: '97%' },
          { name: '早餐不错', value: '90%' }
        ],
        sellingPoints: '酒店坐落于北京，是朝阳区建国门外永安里中街25号，邻世贸天阶，国贸中心，与北京站约10分钟车程，周边交通便利，距离地铁一号线永安里站很近，多种房型，智能语音，酒店多种房型，小度语音通话，送外卖快，满足您的多种需求。',
        checkInRestrictions: '酒店只接待大陆客人'
      }
    };
  },
  methods: {
    findPage(){
      axios.get(`http://localhost:1000/hotel/findById/`+this.$route.query.id).then(res=>{
        this.biao=res.data.data;
      })
    },
  },
  created() {
    this.findPage();
  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }
      return dateFormat(value,arg);
    }
  },
};
</script>

<style scoped>
.hotel {
           padding: 20px;
         }
.hotel-type {
  font-weight: bold;
}
.hotel-desc {
  color: #666;
}
.rating-container {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.rating-item {
  margin-bottom: 5px;
}
.sub-rating-container {
  margin-top: 10px;
}
.sub-rating-item {
  margin-bottom: 5px;
}
.policy-section,
.service-section {
                       margin-bottom: 20px;
  border-top: 1px solid #ccc;
                     }
.policy-item,
          .service-item {
                       margin-bottom: 10px;
                     }
.policy-title .service-title {
                       display: flex;
                       align-items: center;
                       margin-bottom: 5px;
                     }
.icon-policy,
        .icon-service {
                  margin-right: 5px;
                  font-size: 14px;

                }
.transportation-item {
                    display: flex;
                    align-items: flex-start;
                    margin-bottom: 10px;
                  }
.transportation-icon {
                    width: 20px;
                    margin-right: 10px;
                  }
.transportation-details {
                    flex: 1;
                  }
.transportation-name {
                    margin-bottom: 5px;
                  }
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px;
  background-color: rgba(12, 77, 142, 0.85);
  margin-left: -15px;
}
.bei{
  font-size: 15px;
  position: absolute;
  top: 60px;
  left: 30px;
  right: auto;
}
.shi{
  font-size: 15px;
  position: absolute;
  top: 30px;
  left: 30px;
  right: auto;
}

.evaluation-container {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}
.rating-item {
  margin-bottom: 10px;
}
.rating-score {
  font-size: 18px;
  font-weight: bold;
  color: #30689e;
}
.rating-score1 {
  font-size: 30px;
  font-weight: bold;
  color: #30689e;
}
.rating-percentage {
  margin-left: 10px;
}
.detail-list {
  list-style: none;
  padding: 0;
}
.detail-list li {
  margin-bottom: 5px;
}
.detail-item-title {
  display: inline-block;
  width: 80px;
}
.detail-item-score {
  color: #333;
}
.jiao{
  border-top: 1px solid #ccc;
}
</style>
